import React, { useEffect, useState } from 'react'
import { Checkbox, Form, message, Modal, Spin, Table, Typography } from 'antd'
import useGetTableData from '@/hooks/useGetTableDataV2NoPagination'
import { querySku } from '@/api/goods'
import SearchForm from '@/components/CustomForm/SearchForm'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useSkuColumns } from './TableColumns'
import { ITableDataSKU } from './types'
import { searchConfig } from './FormConfig'
import './skuinfo.less'
import useSearchSpu from '@/hooks/useSearchSpu'
const Index: React.FC = () => {
  const [form] = useForm()
  const { SpuOptions, handleSearchSpu, setSpuOptions } = useSearchSpu('spuId')
  const { tableProps, params, search, reset, reload } = useGetTableData<ITableDataSKU>(querySku, {
    form: form,
    immediatelySend: false,
    paramsCallback: (reqParams) => {
      return {
        ...reqParams,
      }
    },
  })
  return (
    <PageContainer className="packing_skuinfo_wrap">
      <SearchForm
        params={params}
        form={form}
        searchConfig={searchConfig({
          SpuOptions,
          handleSearchSpuOptions: handleSearchSpu,
        })}
        onFinish={async () => {
          search()
        }}
        onReset={() => {
          reset()
        }}
      ></SearchForm>
      <div className="psw_tablewrap">
        <Table bordered size="small" columns={useSkuColumns()} {...tableProps} rowKey="spuId" pagination={false} />
      </div>
    </PageContainer>
  )
}

export default Index
